<template>
  <div>
    <div class="header">
      <el-form ref="form" :model="searchForm" class="from" size="small" label-position="left">
        <el-form-item label="辖区:" label-width="80px">
          <el-select v-model="searchForm.value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="padding-right:100px">
          <el-button type="primary">查询</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <h2>辖区分局统计</h2>
      <div class="buttons">
        <el-button @click="allStatistics" type="primary" style="margin-left:30px">总统计</el-button>
        <el-button @click="ViewAnnualStatistics" style="margin-left:30px">年统计</el-button>
        <el-button @click="ViewQuarterStatistics" style="margin-left:30px">季度统计</el-button>
        <el-button @click="viewMonthlyStatistics" type="primary" style="margin-left:30px">月统计</el-button>
        <el-select v-model="checkedYear" clearable placeholder="选择年份" style="margin-left:30px">
          <el-option v-for="item in year" :key="item.value" :label="item.value" :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="checkedQuarter" clearable placeholder="选择季度" style="margin-left:30px">
          <el-option v-for="item in quarter" :key="item.value" :label="item.value" :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="checkedMonth" clearable placeholder="选择月" style="margin-left:30px">
          <el-option v-for="item in month" :key="item.value" :label="item.value" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <el-table :data="tableData" style="width: 100%" :header-cell-style="headerStyle" :row-class-name="tableRowClassName" border id="stationsTable">
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column prop="bench" label="分局名称" align="center">
        </el-table-column>
        <el-table-column prop="name" label="油站名称" align="center">
        </el-table-column>
        <el-table-column prop="oil" label="油品名称" align="center">
        </el-table-column>
        <el-table-column prop="Tnumber" label="吨总累计" align="center">
        </el-table-column>
        <el-table-column prop="money" label="金额总累计(万元)" align="center">
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <el-dialog title="加油站数据表单" :visible.sync="stationsForm.addStationsDataDialog" width="950px" class="dialog">
        <linechart style="height:400px;width:75%" :chartdata="years_data" :xAxis="{type: 'category',data:years,axisLine: {lineStyle: {color: '#000'}}}" :yAxis="{splitLine: { show: false },axisLine: {lineStyle: {color: ' #000', } }}" legendColor='#000' :grid="{bottom: 30,left: 50}"></linechart>
        <piechart :chartdata="piedata" textStyle='#000' :legend="{x:'65',y:'250'}" style="height:400px;width:25%;float:right;margin-top:-40%"></piechart>
      </el-dialog>
    </div>
  </div>
</template>



<script>
import linechart from '../datascreen/config/line_chart.vue'
import * as dayData from '../datascreen/config/dayData'
import piechart from '../datascreen/config/pie_chart.vue'
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
  components: { linechart, piechart },
  data() {
    return {
      year: [{ value: '2015' }, { value: '2016' }, { value: '2017' }, { value: '2018' }, { value: '2019' }, { value: '2020' },],
      quarter: [{ value: '1' }, { value: '2' }, { value: '3' }, { value: '4' }],
      month: [{ value: '1' }, { value: '2' }, { value: '3' }, { value: '4' }, { value: '5' }, { value: '6' }, { value: '7' }, { value: '8' }, { value: '9' }, { value: '10' }, { value: '11' }, { value: '12' }],
      years_data: {
        data: [[71, 46, 92, 109, 119, 119, 110, 133, 135, 153, 145, 145], [55, 38, 63, 72, 79, 79, 76, 83, 85, 90, 87, 87]],
        name: ['加油量（吨）', '营业额（万元）'],
      },
      piedata: [
        { value: 96.64, name: '#92' },
        { value: 97.65, name: '#95' },
        { value: 63.32, name: '#0  ' },
        { value: 45.32, name: '#98' },
      ],
      checkedYear: '',
      checkedMonth: '',
      checkedQuarter: '',
      form: {},
      value: '',
      options: [],
      dayData: dayData,
      searchForm: {
        name: "",
        value: ""
      },
      stationsForm: {
        addStationsDataDialog: false,
        name: '',
        fenju: '',
        juzhang: {
          name: '',
          dianhua: ''
        },
        guanliyuan: {
          name: '',
          dianhua: ''
        },
        dizhi: '',
        jindu: '',
        weidu: '',
        youzhanfaren: {
          name: '',
          lianxidianhua: '',
          zhengjianhao: '',
          shibiema: ''
        }
      },
      tableData: [{
        money: '2203',
        Tnumber: '43.32',
        oil: '#92',
        name: '毕集加油站',
        bench: '毕集分局',
      }, {
        money: '3243',
        Tnumber: '51.23',
        oil: '#95',
        name: '毕集加油站',
        bench: '毕集分局',
      }, {
        money: '2255',
        Tnumber: '46.42',
        oil: '#95',
        name: '亿林加油站',
        bench: '亿林分局',
      }, {
        money: '2268',
        Tnumber: '53.32',
        oil: '#92',
        name: '毕集加油站',
        bench: '亿林分局',
      }, {
        money: '3268',
        Tnumber: '63.32',
        oil: '#0',
        name: '中石化加油站',
        bench: '和平分局',
      },
      {
        money: '2868',
        Tnumber: '45.32',
        oil: '#98',
        name: '中石化加油站',
        bench: '和平分局',
      }]
    }
  },
  methods: {
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 === 0) {
        return 'warning-row';
      } else {
        return 'success-row';
      }
    },
    headerStyle() {
      return '  background: #eef9fe;'
    },
    ToGunDetail(item) {
      this.$router.push(
        {
          path: '/stationsManagement/guns',
          name: 'guns',
          query: { name: item.name, id: item.id }
        }
      )
    },
    ToGunDetail(item) {
      this.$router.push(
        {
          path: '/stationsManagement/guns',
          name: 'guns',
          query: { name: item.name, id: item.id }
        }
      )
    },
    allStatistics() {
      this.stationsForm.addStationsDataDialog = true;
    },
    viewMonthlyStatistics() {
      if ((this.checkedYear) && (this.checkedMonth)) {
        this.stationsForm.addStationsDataDialog = true;
      } else {
        this.$message({
          message: '请选择年份和月份',
          type: 'warning'
        });
      }
    },
    ViewQuarterStatistics() {
      if ((this.checkedYear) && (this.checkedQuarter)) {
        this.stationsForm.addStationsDataDialog = true;
      } else {
        this.$message({
          message: '请选择年份和季度',
          type: 'warning'
        });
      }
    },
    ViewAnnualStatistics() {
      if (!this.checkedYear) {
        this.$message({
          message: '请选择年份',
          type: 'warning'
        });
      }
      else {
        this.stationsForm.addStationsDataDialog = true;
      }
    },
    exportExcel() {
      var wb = XLSX.utils.table_to_book(document.querySelector('#stationsTable'))
      console.log(wb);
      var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' }, { sheetRows: 5 })
      try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'demo.xlsx')
      } catch (e) {
        alert("导出失败")
      }
      return wbout
    }
  },
  computed: {
    years() {
      let arr = []
      for (let i = 2011; i <= 2022; i++) {
        arr.push(i + '年')
      }
      return arr
    },
  }
}
</script>
<style lang="scss" scoped>
@import "../../style.css";
.header {
  padding: 30px;
  width: 100%;
}
.dialog {
  display: flex;
  flex-direction: row;
}
.el-select {
  width: 120px;
}
.el-form-item {
  padding-right: 80px;
}
.el-form-item .el-select {
  width: 200px;
}
.el-form-item .el-input {
  width: 200px;
}
.table {
  padding: 30px;
  width: 100%;
}
.buttons {
  float: right;
  padding-bottom: 20px;
}
.title {
  float: left;
}
.from {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
</style>